<template>
	<view class="productClass row" :style="productClassStyle">
		<!-- <loading :isShow="isLoadingShow"></loading> -->
		<!-- 左侧一级分类列表 -->
		<scroll-view class="leftClassList col-3 h-100" scroll-y :scroll-top="primaryScrollTop">
			<view class="leftClassItem" v-for="(item,index) in leftClassData" :key="index">
				<view :class="currentIndex===index?'selectClassItem':''" @tap="selectClassTap(index)" style="height: 104rpx; line-height: 104rpx;">{{item.name}}</view>
			</view>
		</scroll-view>
		
		<!-- 右侧二级分类列表 -->
		<scroll-view class="rightClassListView col-9 h-100" scroll-with-animation scroll-y :scroll-top="scrollTop">
			<view class="rightClassCell" v-for="(item,index) in rightClassData":key="index" @click="right_click(item.id)">
				<image :src="item.image"></image>
				<view class="icon-title-style">{{item.name}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoadingShow:false,
				leftClassData:[],	//左侧一级分类列表数据
				rightClassData:[],	//右侧二级分类列表数据
				currentIndex:0,
				scrollTop:0,
				leftScrollTop:[],	//左侧每一个分类项目距离顶部的高度
				leftClassItemHeight:0,	//左侧一个分类项目的高
				primaryScrollTop:0,	//左侧分类项目距离顶部的距离
				productClassStyle:'',	//设备的可用高度
				// rightUsableHeight:'',
			}
		},
		methods: {
			//左侧一级分类列表的触碰事件
			selectClassTap(index){
				this.currentIndex = index;
				this.rightClassData = this.leftClassData[index].c;
			},
			right_click(index){
				uni.navigateTo({
					url: "../tabbar-1/search-lsit-data/index?id="+index,
				})
			},
			networkingData(){
				uni.showLoading({
				    title: '加载中'  
				});
				uni.request({
					url:this.baseurl+"index.php/api/index/category_list",
					method:'POST',
					header:{
						"cat_type":"default",
					},
					success:(res)=>{
						var data = res.data;
						if("1"==data.code){
							uni.hideLoading();
							this.leftClassData = data.data;
							this.rightClassData = this.leftClassData[0].c;
						}
					}
				})
			}
		},
		onLoad(){
			let temp =  uni.getSystemInfoSync();	//获取系统信息同步接口
			this.productClassStyle = `height:${temp.windowHeight}px`;	//获取可用高度
			// this.rightUsableHeight = `${temp.windowHeight}`;
			
			this.networkingData();//网络数据请求
			
			//loading动画加载消失
			this.$nextTick(()=>{
				this.isLoadingShow = false;
			})
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.productClass{
		display: flex;
		border-top: 1px solid #f3f3f3;
	}
	
	.leftClassList{
		background-color: #EDECEC;
		width: 176rpx;	
		border-right: 1px solid #f3f3f3;
		padding: 0;
	}
	.leftClassList .leftClassItem{
		border-bottom: 1px solid #F3F3F3;
		text-align: center;
		font-size: 26upx;
	}
	.leftClassList .leftClassItem view{
		
		border-left: 3px solid transparent;
	}
	.leftClassList .leftClassItem .selectClassItem{
		color: #f46d01;
		background-color: #FFFFFF;
		border-left: 3px solid #f46d01;
	}
	.rightClassListView{
		display: flex !important;
		width: 100%;
		.rightClassCell{
			width: 160rpx;
			height: 220rpx;
			padding: 16rpx 0 0 24rpx;
			margin: 24rpx 0 0 0;
			float: left;
			image{
				width: 160rpx;
				height: 160rpx;
			}
			.icon-title-style{
				width: 160rpx;
				text-align: center;
			}
		}
	}
	
	
	
	/deep/ .rightClassListView .uni-scroll-view-content{
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}
</style>


